<template>
  <div>
    <div>
       <el-form :model="filterData"  size="mini">
          <el-row :gutter="15">
            <el-col style="width: 280px;display: flex;line-height: 32px;">
                <div style="width: 80px;">付款时间:</div>
                <el-date-picker type="daterange" v-model="filterData.daterange" start-placeholder="开始时间"
                  end-placeholder="结束时间" value-format="yyyy-MM-dd" clearable style="width: 100%;" clearable>
                </el-date-picker>
            </el-col>
            <el-col style="width: 280px;display: flex;line-height: 32px;">
                <div style="width: 80px;">采购单号:</div>
                 <el-input v-model="filterData.reqcode" placeholder="采购单号" clearable></el-input>
                </el-date-picker>
            </el-col>

            <el-col style="width: 240px;display: flex;line-height: 32px;">
                <div style="width: 80px;">收款单位:</div>
                <el-input v-model="filterData.seller" placeholder="收款单位名称" clearable></el-input>
                </el-date-picker>
            </el-col>
            <el-col style="width: 240px;display: flex;line-height: 32px;">
                <div style="width: 80px;">付款状态:</div>
                  <el-select v-model="filterData.status" placeholder="付款状态" clearable style="width: 240px">
                    <el-option label="待付款" value="0"></el-option>
                    <el-option label="已付款" value="1"></el-option>
                  </el-select>
                </el-date-picker>
            </el-col>

            <el-col style="width: 240px;display: flex;line-height: 32px;">
                <div style="width: 80px;">付款金额:</div>
                 <el-input v-model="filterData.amount" placeholder="付款金额" clearable></el-input>
                </el-date-picker>
            </el-col>

            <el-col style="width: 280px;display: flex;line-height: 32px;">
                <div style="width: 80px;">所属账套:</div>
                <el-select v-model="filterData.buyer" filterable placeholder="账套" style="width: 100%;" clearable>
                  <el-option :label="item.name" :value="item.name" v-for="(item,index) in accounts" :key="index"></el-option>
                </el-select>
             </el-col>
             <el-col style="width: 260px;display: flex;line-height: 32px;">
                 <div style="width: 80px;">付款备注:</div>
                  <el-input v-model="filterData.paymemomemo" placeholder="付款备注" clearable></el-input>
                 </el-date-picker>
             </el-col>
            <el-col style="width: 100px;">
              <el-form-item label="" label-width="0">
              <el-button type="primary" icon='el-icon-search' @click="handleSearch">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
       </el-form>
    </div>

    <div style="display: flex; line-height:35px;">
      <div style="flex: 1;"><el-button type="primary" icon="el-icon-plus" size="mini" @click="handleCreate">新增付款申请</el-button></div>
      <div>
      </div>
    </div>
    <div>
      <el-radio-group v-model="paystatus"  size="mini" @change="handlePayStatusChanged"  >
        <el-radio-button label="全部" ></el-radio-button>
        <el-radio-button label="待支付"></el-radio-button>
        <el-radio-button label="已支付"></el-radio-button>
      </el-radio-group>
    </div>

    <div class="table-wraper">
      <el-table border :data="tableData" height="100%"
        :header-cell-style="{'background-color': '#e7e7e7','color':'#666',border:'1px solid #f0f0f0'}" @select="handleSelectChanged" @select-all="handleSelectChanged">
        <el-table-column label="序号" type="index" width="50px" align="center" fixed="left"></el-table-column>
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column type="expand" label="详情" width="50px">
          <template v-slot="scope">
            <div style="margin-left: 100px;width: 900px;">
              <el-table border :data="scope.row.goods">
                <el-table-column label="序号" type="index" width="50px" align="center"></el-table-column>
                <el-table-column label="产品名称" prop="title"></el-table-column>
                <el-table-column label="规格型号" prop="model"></el-table-column>
                <el-table-column label="品牌" prop="brand" width="60px" align="center"></el-table-column>
                <el-table-column label="单位" prop="unit" width="60px" align="center"></el-table-column>
                <el-table-column label="数量" prop="count" width="60px" align="center"></el-table-column>
                <el-table-column label="单价" prop="price" width="100px" align="center"></el-table-column>
                <el-table-column label="小计" prop="total" width="100px" align="center"></el-table-column>
                <el-table-column label="备注" prop="dmemo"></el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="申请日期" prop="req_date" width="90px" align="center">
          <template v-slot="scope">
            {{scope.row.createtime.split(" ")[0]}}
          </template>
        </el-table-column>
        <el-table-column label="采购单号" prop="reqcode" width="120px" align="center"></el-table-column>
        <el-table-column label="支付状态" prop="status" align="center" width="70px">
          <template v-slot="scope">
            <span v-if="scope.row.status==0" style="background-color:#F56C6C;color:#EEE;padding:2px 2px;">未支付</span>
            <span v-if="scope.row.status==1" style="background-color:#00aa00;color:#EEE;padding:2px 2px;">已支付</span>
          </template>
        </el-table-column>
        <el-table-column label="收款单位名称" prop="seller"  width="250px" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column label="采购途径" prop="buyroute" align="left" width="90px" show-overflow-tooltip></el-table-column>
        <el-table-column label="付款方式" prop="paytype" align="left" width="90px" show-overflow-tooltip></el-table-column>
        <el-table-column label="金额" prop="amount" align="center" width="90px"></el-table-column>

        <el-table-column label="店铺名称" align="left" width="120px" show-overflow-tooltip>
          <template v-slot="scope">
            <a :href="scope.row.shopurl" target="_blank"  v-if="scope.row.shopurl!=''"><i class="el-icon-link"></i> </a>
            <span>{{scope.row.shopname}}</span>
          </template>
        </el-table-column>
        <el-table-column label="请款备注" prop="reqmemo" align="left"  show-overflow-tooltip></el-table-column>
        <el-table-column label="付款时间" prop="paydate" width="90px" align="center" ></el-table-column>
        <el-table-column label="申请人" prop="requester" align="center" width="90px"></el-table-column>
        <el-table-column label="付款单位名称" prop="buyer" align="center" width="150px" show-overflow-tooltip></el-table-column>
        <el-table-column label="付款备注" prop="paymemo" align="left"  show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center" width="120px" fixed="right">
          <template v-slot="scope">
            <el-button-group>
              <el-button icon="el-icon-edit-outline" size="mini" circle @click="handleEdit(scope.$index,scope.row)"></el-button>
              <el-button icon="el-icon-link" size="mini" v-if="scope.row.attach.length>0" circle @click="handleViewAttach(scope.$index,scope.row)"></el-button>
              <el-button icon="el-icon-delete" type="danger" size="mini" circle @click="handleDelete(scope.$index,scope.row)" ></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 10px;display: flex;">
      <div style="flex: 1;">
        <span>选中总额:{{sum_select.toFixed(2)}}</span>
        <span style="margin-left: 20px;" >已付总额:{{paidsum.toFixed(2)}}</span>
        <span style="margin-left: 20px;">待付总额:{{unpaidsum.toFixed(2)}}</span>
        <span style="margin-left: 20px;">全部总额:{{sum.toFixed(2)}}</span>
      </div>
      <el-pagination class="pagination" prev-text="上一页" next-text="下一页"
        layout=" prev, pager, next,sizes,total" :page-sizes="[18, 36, 54]" :total="count" :page-size="pagesize"
        :current-page="curpage" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <EditUI v-if="editVisible" ref="editUI" @updated="handleEditCallback"></EditUI>
     <CreateUI v-if="createVisbile" ref="createUI" @complete="handleSearch()"></CreateUI>
     <AttachViewer  v-if="attachVisibile" ref="attachUI"></AttachViewer>
   </div>
</template>

<script>
  import CreateUI from './create.vue';
  import EditUI from './edit.vue'
  import AttachViewer from '@/components/attachviewer.vue'
  export default {
    components:{
        CreateUI,
        EditUI,
        AttachViewer
    },
    data() {
      return {
        filterData:{
           daterange:[],
           recode:"",
           amount:'',
           seller:'',
           buyer:'',
           status:'',
           memo:'',
        },
        accounts:[],
        paystatus:'',
        sum_select:0,
        paidsum:0,
        unpaidsum:0,
        sum:0,
        createVisbile:false,
        editVisible:false,
        attachVisibile:false,
        curpage:1,
        pagesize:18,
        count:1,
        tableData: []
      }
    },
    created() {
      var now= new Date();
      var firstDay=this.formatDate(new Date(now.getFullYear(),now.getMonth(),1));
      var lastDay=this.formatDate(new Date(now.getFullYear(),now.getMonth()+1,0));
      this.filterData.daterange = [firstDay,lastDay];

      if(this.$route.query&& this.$route.query.status!=''){
        console.log(this.$route.query.status);
        this.filterData.status=this.$route.query.status;
      }
      this.loadAccount();
      this.loadDataList();
    },
    methods: {
      formatDate(date) {
        const yyyy = date.getFullYear();
        const mm = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
        const dd = String(date.getDate()).padStart(2, '0');
        return `${yyyy}-${mm}-${dd}`;
      },
      loadAccount(){
        this.axios.post("api/admin/account/list").then(res=>{
          if(res.status==200&& res.data.code==0){
             this.accounts=res.data.list;
          }
        })
      },
      handleViewAttach(index,data){
        this.attachVisibile=true;
        this.$nextTick(()=>{
          this.$refs.attachUI.dialogVisible=true;
          this.$refs.attachUI.initData(data.attach);
        })
      },
      handlePayStatusChanged(){
         this.filterData.status=this.paystatus=="待支付"? "0":(this.paystatus=="已支付"? "1": "");
         this.loadDataList();
      },
      handleSelectChanged(list){
        console.log(list);
        this.sum_select=0;
        list.forEach((item)=>{
          this.sum_select+=(parseFloat(item.amount));
        })
      },
      loadDataList() {
        const params={
          daterange:this.filterData.daterange,
          curpage:this.curpage,
          pagesize:this.pagesize,
          reqcode:this.filterData.reqcode,
          amount:this.filterData.amount,
          seller:this.filterData.seller,
          buyer:this.filterData.buyer,
          memo:this.filterData.memo,
          status:this.filterData.status
        }
        this.axios.post("api/admin/buypayment/list",params).then(res => {
          if (res.status == 200 && res.data.code == 1) {
            this.tableData = res.data.list;
            this.count=res.data.numrows;
            this.paidrmb=res.data.paidsum;
            this.sum=res.data.sum;
            this.unpaidsum=res.data.unpaidsum;
          }
        })
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      handleCreate:function(){
        this.createVisbile=true;
        this.$nextTick(()=>{
          this.$refs.createUI.dialogVisible=true;
          this.$refs.createUI.init();
        })
      },
      handleSearch(){
          this.curpage=1;
          this.loadDataList();
      },
      handleEdit(index,data){
          this.editVisible=true;
          this.$nextTick(()=>{
            this.$refs.editUI.dialogVisible=true;
            this.$refs.editUI.init(index,JSON.parse(JSON.stringify(data)));
          })
      },
      handleEditCallback(index,data){
          this.tableData[index].type=data.type;
          this.tableData[index].status=data.paystatus;
          this.tableData[index].paymemo=data.paymemo;
          this.tableData[index].paydate=data.paydate;
          this.tableData[index].attach=data.attach;
      },

      handleDelete(index,data){
        console.log(data);
         this.$confirm("确定要删除此付款申请吗？","确认").then(res=>{
           this.axios.post("api/admin/buypayment/delete",{id:data.id,buyid:data.buyid}).then(res=>{
             if(res.status==200 && res.data.code==1){
                this.$message.success({message:res.data.msg,duration:1500,showClose:true});
                this.loadDataList();
             }else{
               this.$message.error({message:res.data.msg,duration:1500,showClose:true});
             }
           })
           console.log(res);
         }).catch(()=>{

         })
      }
    }
  }
</script>

<style scoped>
  .table-wraper {
    height: calc(100vh - 240px);
  }
</style>
